<template>
	<!-- @click.stop="HClick" -->
	<button :class="_class" hover-class="btn-hover">{{ pros.label }}</button>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
const pros = defineProps({
	label: {
		type: String,
		default: ''
	},
	color: {
		type: String,
		default: 'primary'
	},
	text: {
		type: Boolean,
		default: false
	},
	plain: {
		type: Boolean,
		default: false
	}
});

const _class = computed(() => {
	if (pros.text) {
		return `btn-${pros.color}-text`;
	} else if (pros.plain) {
		return `btn-${pros.color}-plain`;
	} else {
		return `btn-${pros.color}`;
	}
});
// const emits = defineEmits(['click']);

// function HClick(e: Event) {
// 	emits('click', e);
// }
</script>

<style scoped>
button::after {
	border: none;
}

.btn-primary {
	font-size: 30rpx;
	color: #ffffff;
	background-color: #3b5cf0;
	border-radius: 200rpx;
}

.btn-primary-plain {
	font-size: 30rpx;
	color: #3b5cf0;
	border: solid 1px #3b5cf0;
	background-color: #ffffff;
	border-radius: 200rpx;
}

.btn-primary-text {
	font-size: 30rpx;
	border: none;
	border-radius: 8rpx;
	color: #3b5cf0;
	background-color: #ffffff;
}

.btn-text-hover {
	background-color: rgba(0, 0, 0, 0.06);
}

.btn-hover {
	transform: scale(0.98, 0.98);
}
</style>
